<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .banner {
            width: 200px;
            height: 300px;
            margin: 40px auto;
            overflow: hidden;
            position: relative;
        }

        .banner ul {
            width: 1200px;
            height: 300px;
            display: flex;
            position: absolute;
            background-color: #f00;
        }

        .banner ul li {
            width: 200px;
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
        }

        span {
            position: absolute;
            z-index: 3;
        }

        ol {
            position: absolute;
            width: 100%;
            bottom: 10px;
            display: flex;
            justify-content: center;
        }

        ol li {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #0f0;
            margin: 10px;
        }

        span {
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 20px;
            height: 20px;
            background-color: rgba(0, 0, 0, .5);
            color: #fff;
            text-align: center;
            line-height: 20px;
        }

        #next {
            right: 0;
        }

        .banner .on {
            background-color: #ff0;
        }
    </style>
</head>

<body>

    <div class="banner">
        <span id="prev">&lt;</span>
        <span id="next">&gt;</span>
        <ul id="ul">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>1</li>
        </ul>
        <ol>
            <li class="on"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>

    <script>

        // 无缝滚动的实现
        //    在最后面补一张图片(补第一张图片)
        //    在播放完最后一张(也就是补充的第一张)的瞬间，就切换到第一张

        // 上翻页和下翻页   也是第一张图片和最后的那个第一张图片来回切换

        // bug

        //   外面index 那个定时器的时间一到要长一点

        //   页面失去焦点的时候，犹豫页面的资源延缓加载  炸了
        //      window.onfocus  和  window.onblur


        //   注意，每次autoPlay(启动定时器)都要先清除










        // 获取对象
        var oBanner = document.querySelector('.banner');
        var oPrev = oBanner.querySelector('#prev');
        var oNext = oBanner.querySelector('#next');
        var oUl = oBanner.querySelector('ul');
        var oDots = oBanner.querySelectorAll('ol li');
        var oLis = oBanner.querySelectorAll('ul li') ;
        var w = oBanner.clientWidth ;
        var flag = true ;  // 是否可以点击    防止连点

        // 轮播的功能
        //   自动播放   ---  显示下一张图片
        //   上翻页     ---  显示上一张图片
        //   下翻页    ---   显示下一张图片
        //   小点切换   ---   点哪个点，就显示哪张图片

        //   结论 ---- 显示第几张图片

        var index = 0;   // 显示第几张图片

        var t;  // 定时器




        // 自动播放  --- 每隔1s播放下一张
        autoPlay() ;

        // 页面失去焦点的时候，会延缓DOM的资源 ，但是定时器是异步的，不会受影响

        // 页面失去焦点的时候，清除定时器
        window.onblur = function() {
            console.log(2);
            clearInterval(t) ;
        }

         // 页面获取焦点的时候，启动定时器
        window.onfocus = function() {
            clearInterval(t) ;
            autoPlay() ;
        }


        // 上翻页
        oPrev.onclick = function() {
            if(flag) {
                clearInterval(t) ;
                if(index === 0) {
                    index = oLis.length - 1 ;
                    oUl.style.left = -index * w + 'px' ;
                }
                index-- ;
                move(oUl , 'left' , 20 , -index * w) ;
                dot()
            }
        }

        oNext.onclick = function() {
            if(flag) {
                clearInterval(t) ;
                if(index === oLis.length - 1) {
                    index = 0 ;
                    oUl.style.left = 0 ;
                }
                index++ ;
                move(oUl , 'left' , 20 , -index * w) ;
                dot()
            }
        }


        for(var i = 0 ; i < oDots.length ; i++) {
            oDots[i].setAttribute('data' , i) ;
            oDots[i].onclick = function() {
                if(flag) {
                    clearInterval(t) ;
                    index = this.getAttribute('data') ;
                    move(oUl , 'left' , 20 , -index * w) ;
                    dot()
                }
            }
        }

        oBanner.onmouseover = function() {
            clearInterval(t) ;
        }

        oBanner.onmouseout = function() {
            clearInterval(t) ;
            autoPlay() ;
        }




        function autoPlay() {
            t = setInterval(function() {
                index++ ;
                move(oUl , 'left' , 20 , -index * w , function() {
                    // 播放到了最后一张，也就是第1张
                    if(index === oLis.length - 1) {
                        index = 0 ;
                        oUl.style.left = 0 ;
                    }
                } ) ;
                dot()
            } , 2000)
        }



        function dot() {
            // 清除所有，显示当前
            for(var i = 0 ; i < oDots.length ; i++) {
                oDots[i].classList.remove('on') ;
            }
            if(index === oLis.length - 1) {
                oDots[0].classList.add('on') ;
            } else {
                oDots[index].classList.add('on') ;
            }
            
        }



        function move(ele, prop, speed, end, cb) {
            flag = false ;
            // 确定速度？  根据终点位置和起点位置的值
            var x = getCss(ele, prop);   // 样式获取到的是字符串
            x = parseInt(x);
            speed = end > x ? speed : -speed;
            var t = setInterval(function () {
                x += speed;
                ele.style[prop] = x + 'px';
                if (Math.abs(end - x) <= Math.abs(speed)) {
                    clearInterval(t);
                    // 到达终点
                    ele.style[prop] = end + 'px';
                    flag = true ;
                    cb && cb();

                }
            }, 20)
        }



        // 获取样式
        function getCss(ele, prop) {
            if (getComputedStyle) {
                return getComputedStyle(ele)[prop]
            }
            return ele.currentStyle[prop]
        }



    </script>

</body>

</html>